<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 
           1. 计算属性,可以使模板变的更简洁

           2. 计算属性的用法
            computed:{
                reversedMessage: function(){
                    return msg.split('').reverse().join('');
                }
            }
        --> 
        <div>{{msg}}</div>
        <div>{{reversedMessage}}</div>

    </div>

    <script lang="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
              msg:'hello'  
            },
            computed:{
                reversedMessage: function(){
                    // 计算属性是基于data中的数据
                    return this.msg.split('').reverse().join('');
                }
            }

        })
    </script>

</body>

</html>